大家好，今天主要用到不一樣有Offstage、IconButton,也會使用到GridView.count、 List.generate

先定義了一個User，假設我從雲端取得資訊後存成User類別

class User {
  User(this.name,this.assetName);

  String name;
  String assetName;
}

製造一些假資料

  List<User> _users = [
    User("Player1", "assets/icons/icon_user.jpg"),
    User("Player2", "assets/icons/icon_user.jpg"),
    User("Player3", "assets/icons/icon_user.jpg"),
    User("Player4", "assets/icons/icon_user.jpg"),
    User("Player5", "assets/icons/icon_user.jpg"),
  ];

定義不同字型的設定

  TextStyle titleStyle = TextStyle(color: Colors.white, fontSize: 20.0);
 TextStyle userNameStyle = TextStyle(color: Colors.white, fontSize: 14.0);

GridView、每一個使用者

用 MediaQuery.of(context).size.width 取得螢幕寬度，
用SizedBox限制GridView佔寬度的60%
children就看有多少個user就產生幾個child

 Center(
            child: SizedBox(
              width: MediaQuery.of(context).size.width * 0.6,
              child: GridView.count(
                shrinkWrap: true,
                crossAxisCount: 2,  //每行兩個User
                crossAxisSpacing: 16.0, //非滾動方向間距
                mainAxisSpacing: 16.0, //滾動方向間距
                childAspectRatio: 10 / 12, //子Widget寬高比
                children: List.generate(
                    _users.length, (index) => _buildUser(_users[index])),
              ),
            ),
          ),

傳遞進來user後，數據在Text要使用時用${}，括號內是變數，字型是上面定義過的userNameStyle

 Text(
     "${user.name}",
     style: userNameStyle,
 )

在Column中使用Expanded，讓圖片使用除了Text，以及SizedBox外所有剩餘空間

  _buildUser(User user) {
    return GestureDetector(
      onTap: () {
            //點擊事件
      },
      child: Container(
        child: Column(
          children: [
            Expanded(...), //此處使用Expanded使用剩餘空間
            SizedBox(
              height: 8.0,
            ),
            Text(
              "${user.name}",
              style: userNameStyle,
            )
          ],
        ),
      ),
    );
  }

Offstage可以讓Widget藏起來

使用Offstage將要隱藏的Widget包起來，offstage預設為true，即會隱藏
設一個boolean editMode，來控制

bool editMode = false;

用Stack在圖像上方又疊了兩個Offstage的東西，一個是黑色半透明，一個是Icon

  Expanded(
              child: Stack(
            alignment: Alignment.center,
            children: [
              Image.asset(user.assetName),
              Offstage(
                  offstage: !editMode,
                  child: Container(
                    color: Colors.black.withOpacity(0.5),
                  )),
              Offstage(
                offstage: !editMode,
                child: Icon(Icons.edit),
              )
            ],
          )),

IconButton 編輯按鍵、返回按鍵

頁面最上方還有編輯Icon，返回Icon及Logo
先前我都使用GestureDetecter，其實Flutter有提供很多按鍵相關的Widget，FlatButton、RaisedButton、IconButton等等，Flutter提供的Button通常有波紋，也可以設定很多不同狀態的顏色什麼的，比較好看一點
使用方法也很簡單，IconButton帶入icon,然後onPressed執行要做的事情

IconButton(
      icon: Icon(Icons.mode_edit),
     onPressed: () {
           setState(() {
          editMode = true;
          });
         },
     )

點擊Icons.mode_edit，使editMode = true，並setState
點擊Icons.arrow_back，使editMode = false，並setState
兩個Icon都有包在Offstage裡，一個顯示時就會另一個消失

Stack(
          alignment: Alignment.center,
          children: [
            Align(
              alignment: Alignment.centerLeft,
              child: Offstage(
                  offstage: !editMode,
                  child: IconButton(
                    icon: Icon(Icons.arrow_back),
                    onPressed: () {
                      setState(() {
                        editMode = false;
                      });
                    },
                  )),
            ),
            Image.asset(
              "assets/netflix_logo.png",
              height: 80,
            ),
            Align(
                alignment: Alignment.centerRight,
                child: Offstage(
                  offstage: editMode,
                  child: IconButton(
                    icon: Icon(Icons.mode_edit),
                    onPressed: () {
                      setState(() {
                        editMode = true;
                      });
                    },
                  ),
                ))
          ],
        ),
        

今日之效果圖

GitHub連結： flutter-netflix-clone